<template>
  <!--底部导航&信息-->
  <div class="cp-bottom-info">
    <div class="cp-bottom-info-beishu" v-show="chosenObj.hasAll">

      <div class="add-border plus-num" @click="beishu+=1"><i class="fa fa-plus"></i></div>
      <div class="add-border count-num">{{beishu}}</div>
      <div class="add-border minus-num" @click="minusNum"><i class="fa fa-minus"></i></div>
      <span>&nbsp;&nbsp;倍</span>
      <div class="cp-bottom-info-unit">
        <div class="unit yuan choose-unit" @click="chooseUnit(100,$event.target)">元</div>
        <div class="unit jiao" @click="chooseUnit(10,$event.target)">角</div>
        <div class="unit fen" @click="chooseUnit(1,$event.target)">分</div>
      </div>

    </div>

    <!--时时彩-->
    <div :class="'ssc '+(chosenObj.hasAll?'bg-chosen':'')" v-if="classType==1">
      <div class="cp-bottom-left ">
        <div>

        共{{zhushu}}注 {{formatMoney}}元
        </div>
        <span>
          {{selectedNums}}
        </span>
      </div>
      <div class="cp-bottom-right" @click="showBallBasket">
        <i class="fa fa-trash-o"></i>
        号码篮
      </div>
    </div>
    <!--k3-->
    <div class="k3" v-if="classType==2">
      <div class="clear">
        清空
      </div>
      <div class="touzhu">马上投注</div>

    </div>
    <!--六合彩-->
    <div class="lhc" v-if="classType==3">
      <div class="clear">
        清空
      </div>
      <div class="touzhu">马上投注</div>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'cp-bottom-info',
    data() {
      return {
        beishu: 1,
        zhushu: 0,
        totalMoney: 0,
        unit: 100,
        selectedNums:""
      }
    },
    props: {
      selectedBall: {
        type: Boolean,
        default: false,
      },
      beishuShow: {
        type: Boolean,
        default: false,
      },
      classType: {
        type: Number,
      },
      chosenObj: {
        type: [Object, Number],
        default: {
          balls: "",
          hasAll: false,
          zhushu: 0
        }
      }
    },
    watch:{
      chosenObj(val){
        if(val.hasAll){
          this.zhushu = val.zhushu;
          this.selectedNums = val.balls;
          this.totalMoney = this.calculateMoney();
        }else {
          this.totalMoney = 0;
        }
      },
      beishu(){
        this.totalMoney = this.calculateMoney();
      },
      unit(){
        this.totalMoney = this.calculateMoney();

      }
    },
    methods: {
      chooseUnit(un,obj) {
        $(".unit").removeClass("choose-unit");
        $(obj).addClass("choose-unit");
        this.unit = un;
      },
      showBallBasket() {
        //显示号码篮
      },
      minusNum() {
        if (this.beishu > 1) {
          this.beishu--
        }
      },
      calculateMoney() {
        return this.zhushu * this.beishu * this.unit * 2;
      }
    },
    mounted:function () {
      this.calculateMoney();
    },
    computed:{
      formatMoney(){
        return (this.totalMoney/100).toFixed(2);
      }
    }
  }
</script>

<style scoped>
  .cp-bottom-info-beishu {
    position: fixed;
    right: 0;
    width: 100%;
    bottom: 1rem;
    display: inline-flex;
    background: #f8f8f8;
    padding: 0.2em 0 0 .8em;
    font-size: 1.6em;
  }

  .cp-bottom-info-unit {
    display: inherit;
    position: absolute;
    right: 0;
    margin-right: 0.5em
  }

  .add-border, .unit {
    height: 0.6rem;
    width: 0.6rem;;
    text-align: center;
    border: 1px solid #d2d2d2;
    margin-top: 0.2rem;
    line-height: 0.6rem;
    background: #fff;
  }

  .cp-bottom-info {
    color: #a3a3a3;
    line-height: 1rem;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #f8f8f8;
    width: 100%;
    height: 1rem;
    z-index: 1503;
    font-size: 1.1em;
    /*display: inline-flex;*/
    /*padding-left: 1em;*/
  }

  .k3 .clear, .lhc .clear {
    color: #e6a200;
    font-size: 1.8em;
    padding-left: 0.5em;
    display: inline-block;
    width: 50%;
  }

  .lhc .touzhu {
    display: inline-block;
    color: #cacaca;
    background: #dc3b40;
    float: right;
    font-size: 1.2em;
    height: 0.6rem;
    width: 1.6rem;
    text-align: center;
    line-height: 0.6rem;
    margin-top: 0.2rem;
    margin-right: 0.2rem;
    border-radius: .2em;
  }

  .k3 .touzhu {
    display: inline-block;
    color: #4e0904;
    background: #feab03;
    background: linear-gradient(180deg, #ffdb01 0, #e07a06);
    background: -webkit-linear-gradient(bottom, #ffdb01, #e07a06);
    float: right;
    font-size: 1.6em;
    height: 0.6rem;
    width: 1.9rem;
    text-align: center;
    line-height: 0.6rem;
    margin-top: 0.2rem;
    margin-right: 0.2rem;
    border-radius: .2em;

  }

  .unit {
    font-size: 0.8em;
    margin-left: 0.2em;
  }

  .choose-unit {
    background: #dc3b40;
    color: #fff;
  }

  .bg-chosen .cp-bottom-left {
    background: #dc3b40 !important;
    transition: 0.1s;
    color: #fff;
  }

  .bg-chosen .cp-bottom-right:before {
    transition: .1s;
    border-left: .8em solid #dc3b40 !important;
  }

  .cp-bottom-nums {
    position: fixed;
    height: 0.9rem;
    left: 0;
    bottom: 0;
    background: #575858;
    width: 100%;
    color: #fff;
    z-index: 5;
    line-height: 0.9rem;
  }

  .k3, .lhc, .ssc {
    background-color: #000;
  }

  .cp-bottom-left {
    float: left;
    width: 66.5%;
    height: 100%;
    background: #252625;
    position: relative;
    z-index: 7;
    transition: .1s;
    font-size: 1.4em;
    padding-left: 1.5em;
  }

  .cp-bottom-right {
    padding-left: 1.5em;
    float: left;
    background: #575858;
    width: 33.5%;
    height: 100%;
    position: relative;
    font-size: 1.4em;
    line-height: 1rem;
  }

  .cp-bottom-right:before {
    content: "";
    position: absolute;
    transition: .1s;
    width: 0;
    height: 0;
    border-top: 1.4em solid transparent;
    border-left: 0.8em solid #252625;
    border-bottom: 1.7em solid transparent;
    left: 0;
    top: 0;
  }
</style>
